<template>
    <div style="width: 100%;padding: 10px">
        <el-card class="box-card">
            <div>
                <div style="display: flex;align-items: center;justify-content: space-between">
                    <div class="details_Header">
                        <div class="deleted_Line"></div>
                        <span class="details_HeaderTitle">拉新团购</span>
                    </div>
                    <div style="display: flex">
                        <el-button v-permission="['groupBuy.audit']" type="primary" v-show="form.status === 1||form.status===2" @click="auditOrderClick">结束团购</el-button>
                    </div>
                </div>
                <div class="deleted_OrderHeader">
                    <el-row :gutter="24">
                        <el-col :span="8">
                            <div style="width: 450px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                <span class="deleted_Row_Headings">团购名称：</span>
                                <span class="deleted_OrderTitle">{{form.name}}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">团购状态：</span>
                            <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{form.statusDescr}}</span>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row :gutter="24" class="deleted_OrderContent">
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">奖励金：</span>
                            <span class="deleted_OrderTitle">{{form.point/100}}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">兑换券：</span>
                            <span class="deleted_OrderTitle">{{form.matchPoint}}</span>
                        </el-col>

                      <el-col :span="8">
                        <span class="deleted_Row_Headings">购物券：</span>
                        <span class="deleted_OrderTitle">{{form.cardPoint }}</span>
                      </el-col>
                    </el-row>
                    <el-row :gutter="24" class="deleted_OrderContent">
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">团购价格：</span>
                            <span class="deleted_OrderTitle">{{form.price }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="deleted_Row_Headings">成团人数：</span>
                            <span class="deleted_OrderTitle">{{form.groupNum }}</span>
                        </el-col>
                      <el-col :span="8">
                        <span class="deleted_Row_Headings">每人限购：</span>
                        <span class="deleted_OrderTitle">{{form.limitNum}}人</span>
                      </el-col>

                    </el-row>
                  <el-row :gutter="24" class="deleted_OrderContent">
                    <el-col :span="8">
                      <span class="deleted_Row_Headings">本人必买:</span>
                      <span class="deleted_OrderTitle" v-if="form.robotNum == 0">是</span>
                      <span class="deleted_OrderTitle" v-else>否</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="deleted_Row_Headings">分销策略：</span>
                      <span class="deleted_OrderTitle">{{distributionName }}</span>
                    </el-col>
                  </el-row>

                </div>
                <div class="product_header_name" style="">
                    <span style="font-size: 18px;color:#409EFF;margin: 10px 10px;">商品明细</span>
                </div>
               <!-- <div style=" display: flex; margin-bottom: 10px; width: 100%;">
                    <div style="display: flex;justify-content: flex-start">
                    </div>
                    <div style="display: flex;justify-content: flex-start">
                        <el-select v-if="mchType == 3" style="width: 235px;margin-right:10px" v-model="mchName" value-key="id" clearable filterable placeholder="请选择商户" :filter-method="remoteMethod" @change="selectMch">
                            <el-option v-for="item in mchList" :key="item.id" :label="item.name" :value="item">
                            </el-option>
                        </el-select>
                        <div class="report_header_date" style="margin-right: 10px;">
                            <el-input prefix-icon="el-icon-search" placeholder="商品名称/货号/条码" v-model="query.keyword" clearable></el-input>
                        </div>
                        <el-button size="small" type="primary" @click="queryClick">查询
                        </el-button>
                        <el-button size="small" type="primary" @click="toAddProduct">新增
                        </el-button>
                        <el-dialog title="搜索商品" :visible.sync="orderVisible" width="950px" v-el-drag-dialog :before-close="orderClose">
                            <div style="position: relative;">
                                <productTable ref="productList" :key="times" :mchId="mchId" @doubleClick="doubleClick" @addClick="productTableAddClick"></productTable>
                            </div>
                        </el-dialog>
                    </div>
                </div>-->
                <el-table v-loadMore="[payLoads,'market-list']" :data="marketForm" border stripe style="width: 100%">
                    <el-table-column label="序号" type="index" width="50" align="center" />
                    <el-table-column label="商品图片" align="left" prop="thumbnail" width="80">
                        <template slot-scope="scope">
                            <el-image style="width: 50px;height: 50px" :src="scope.row.thumbnail"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品名称" align="left" prop="name" />
                    <el-table-column label="规格" align="left" prop="spec" width="100" />
                    <el-table-column label="单位" width="120">
                        <template slot-scope="{row}">
                            <span>{{row.unit}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="销售价" align="left" prop="price" width="160">
                        <template slot-scope="scope">
                            <span>{{scope.row.price}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right" width="80">
                        <template slot-scope="scope">
                            <a style="" @click="delMarketClick(scope.row)">
                                <i style="color: #F56C6C" class="el-icon-delete" />
                            </a>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-if="paginationShow" style="padding-top: 15px;" :current-page="pageNum" :page-size="pageSize" :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                <el-footer class="el-footerBox">
                </el-footer>
            </div>
        </el-card>
    </div>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
import Pagination from "@/components/Pagination";
import permission from "@/directive/permission/index.js";
import loadMore from "@/utils/loadMore";
import { list } from "@/api/product";
import utils from "@/utils/utils";
import {
    find,
    cancel,
    audit,
    unAudit,
    orderList,
    getOrderList,
    productList as market,
    productAdd as saveMarket,
    productDel as delMarket,
} from "@/api/groupBuy";
import { list as distributionList } from "@/api/distribution";
import productTable from "./components//productList";
import { list as mchList } from "@/api/sysMch";
export default {
    name: "groupBuy-view",
    data() {
        return {
            orderVisible: false,
            disOptions: [],
            query: { keyword: "" },
            paginationShow: true,
            marketForm: [],
            payLoads: "",
            productTitle: "",
            productForm: [],

            orders: [],
            pageNum: 1,
            itemList: [],
            pageSize: 10,
            total: 0,
            groupId: "",
            form: {
                id: "",
            },
            distributionName: "",
            mchName:'',
            mchId:'',
            mchList: [],
            times:null,
            mchType:''
        };
    },
    components: { Pagination, history, productTable },
    directives: { permission, elDragDialog },
    watch: {
        $route(newVal, oldVal) {
            console.log(oldVal);
            if (
                newVal.name == "groupBuy-view" &&
                newVal.query.id != this.form.id
            ) {
                this.loadGroup(this.$route.query.id);
            }
        },
    },
    created() {
        this.marketClick();
        this.loadProductClick();
        this.form.id = this.$route.query.id;
        this.loadGroup(this.form.id);
        this.loadMch("");
    },
    methods: {
        doubleClick(val) {
            return false;
            if (
                this.productList.length == 1 &&
                this.productList[0].name == ""
            ) {
                this.productList[0].productId = val.id;
                this.productList[0].name = val.name;
                this.productList[0].quantity = 1;
                this.productList[0].thumbnail = val.thumbnail;
                this.productList[0].spec = val.spec1 + val.spec2;
                this.productList[0].unit = val.unit;
            } else if (
                this.productList[this.productList.length - 1].name == ""
            ) {
                this.productList[this.productList.length - 1].productId =
                    val.id;
                this.productList[this.productList.length - 1].name = val.name;
                this.productList[this.productList.length - 1].quantity = 1;
                this.productList[this.productList.length - 1].thumbnail =
                    val.thumbnail;
                this.productList[this.productList.length - 1].spec =
                    val.spec1 + val.spec2;
                this.productList[this.productList.length - 1].unit = val.unit;
            } else {
                this.productList[this.index].productId = val.id;
                this.productList[this.index].name = val.name;
                this.productList[this.index].quantity = 1;
                this.productList[this.index].thumbnail = val.thumbnail;
                this.productList[this.index].spec = val.spec1 + val.spec2;
                this.productList[this.index].unit = val.unit;
            }
            this.searchSame();
            this.orderVisible = false;
            this.setAddClickHeight();
        },
        productTableAddClick(data) {
            this.orderVisible = false;
            if (data.length > 0) {
                data.forEach((item) => {
                    this.saveGoods(item);
                });
            }
            setTimeout(() => {
                this.marketClick();
            }, 2000);
        },
        saveGoods(item) {
            let params = {};
            params.groupBuyId = this.$route.query.id;
            params.productId = item.id;
            saveMarket(params)
                .then((res) => {
                    _this.marketClick();
                })
                .catch((error) => {});
        },
        addClick(data) {
            var _this = this;
            this.orderVisible = false;
            this.setAddClickHeight();
            this.searchSame();
            let params = {};
            params.groupBuyId = this.$route.query.id;
            params.productId = this.data.id;
            saveMarket(params)
                .then((res) => {
                    _this.marketClick();
                })
                .catch((error) => {});
        },

        orderClose() {
            this.orderVisible = false;
            this.$refs.productList.cancelClick();
        },
        queryDistribution(query) {
            const params = new URLSearchParams();
            params.append("pageNum", 1);
            params.append("pageSize", 50);
            params.append("name", query);
            distributionList(params)
                .then((res) => {
                    this.disOptions = res.data.data;
                    console.log(res, "分销");
                    this.disOptions.forEach((item) => {
                        console.log(item);
                        console.log(this.form.distributionId);
                        if (item.id == this.form.distributionId) {
                            this.distributionName = item.name;
                        }
                    });
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        queryClick() {
            this.marketClick();
        },
        toAddProduct() {
            this.times = new Date().getTime()
            this.orderVisible = true;
        },
        handleSizeChange(value) {
            console.log(value);
            this.pageSize = value;
            // this[this.requestList]()
            this.marketClick();
        },
        handleCurrentChange(value) {
            console.log(this.pageNum);
            console.log(this.requestList);
            this.pageNum = value;
            // this[this.requestList]()
            this.marketClick();
        },
        // remoteMethod(data) {
        //     console.log(data);
        //     this.loadProductClick(data);
        // },
        loadProductClick(data) {
            var _this = this;
            list({ keyword: data }).then((res) => {
                console.log(res);
                _this.productForm = res.data.data;
            });
        },
        marketChoose(data) {
            console.log(data);
            this.productItem = this.productForm[data];
            console.log(this.productItem);
        },
        creatClick() {
            this.saveMarket();
            this.productTitle = "";
        },
        saveMarket() {
            var _this = this;
            if (!utils.isNull(_this.productItem)) {
                if (_this.saveMarketLoading == true) {
                    return;
                }
                _this.saveMarketLoading = true;
                let params = {};
                params.groupBuyId = this.$route.query.id;
                params.productId = this.productItem.id;
                console.log(params, "132132222222222222");
                saveMarket(params)
                    .then((res) => {
                        console.log(res);
                        _this.saveMarketLoading = false;
                        _this.marketClick();
                        _this.visibleMarket = false;
                    })
                    .catch((error) => {
                        _this.saveMarketLoading = false;
                    });
            } else {
                _this.$message({
                    message: "请选择商品",
                    type: "warning",
                });
                return;
            }
        },
        marketClick() {
            var _this = this;
            _this.loadProductClick();

            let params = {};
            params.id = this.$route.query.id;
            params.pageSize = _this.pageSize;
            params.pageNum = _this.pageNum;
            params.keyword = _this.query.keyword;
            params.mchId = _this.mchId
            market(params).then((res) => {
                console.log(res);
                this.total = res.data.total;
                this.marketForm = res.data.data;
            });
        },
        focusMarket(data, item) {
            this.priceMarket = item.price;
            console.log(data);
            console.log(item);
        },
        changeMarket(data, item) {
            var _this = this;
            if (!utils.isNull(item.price)) {
                if (_this.updateMarketLoading == true) {
                    return;
                }
                _this.updateMarketLoading = true;
                var data = {
                    price: item.price,
                    id: item.id,
                };
                updateMarket(data)
                    .then((res) => {
                        _this.updateMarketLoading = false;
                        _this.marketClick();
                    })
                    .catch((error) => {
                        _this.updateMarketLoading = false;
                    });
            } else {
                item.price = this.priceMarket;
            }
        },
        delMarketClick(data) {
            console.log(data);
            var _this = this;
            if (_this.delMarketLoading == true) {
                return;
            }
            _this.delMarketLoading = true;
            delMarket({ groupProductId: data.id })
                .then((res) => {
                    console.log(res);
                    _this.delMarketLoading = false;
                    (this.pageNum = 1), this.marketClick();
                })
                .catch((error) => {
                    _this.delMarketLoading = false;
                });
        },

        toDo(data) {
            this.receiverVisible = true;
            getOrderList({
                periodId: data.id,
            }).then((res) => {
                this.itemList = res.data.orderItem;
            });
        },

        unAuditClick() {
            var product = {
                id: this.form.id,
            };
            this.$confirm("确认审核", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                unAudit(product).then((res) => {
                    this.loadGroup(this.form.id);
                });
            });
        },
        releaseProduct() {
            var product = {
                id: this.form.id,
            };
            this.$confirm("确认审核", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                audit(product).then((res) => {
                    this.loadGroup(this.form.id);
                });
            });
        },
        loadOrderList(data) {
            orderList({
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                groupBuyId: data,
            }).then((res) => {
                this.orders = res.data.data;
                this.total = res.data.total;
            });
        },
        auditOrderClick() {
            this.$confirm("确定结束？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                cancel({
                    id: this.groupId,
                }).then((res) => {
                    this.loadGroup(this.form.id);
                });
            });
        },
        loadGroup(id) {
            find(id).then((res) => {
                this.form = res.data.groupBuy;
                this.groupId = res.data.groupBuy.itemList[0].groupBuyId;
                // this.loadOrderList(this.groupId)
                this.queryDistribution("");
                this.mchType = res.data.mchType
            });
        },
        remoteMethod(query) {
            this.loadMch(query);
        },
        loadMch(query) {
            var _this = this;
            let params = new URLSearchParams();
            params.append("name", query);
            mchList(params)
                .then((response) => {
                    _this.mchList = response.data.data;
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
        selectMch(e) {
            console.log(e);
            if (!utils.isNull(e)) {
                this.mchName = e.name;
                this.mchId = e.id;
            } else {
                this.mchName = "";
                this.mchId = "";
            }
        },
    },
};
</script>

<style scoped>
.box-card {
    width: 100%;
    box-sizing: border-box;
}

.details_Header {
    display: flex;
    align-items: center;
}

.deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409eff;
}

.details_HeaderTitle {
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 150px;
}

.deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
}

.deleted_OrderTitle {
    /*white-space: nowrap;!*一行显示*!*/
    overflow: hidden; /*超出部分隐藏*/

    text-overflow: ellipsis; /*用...代替超出部分*/
}

.deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
}

.details_Buyers {
    display: flex;
    align-items: center;
}

.deleted_Row_Headings {
    color: #666666;
}

.deleted_OrderName {
    color: #409eff;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product_header_name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 5px #409eff solid;
    margin-bottom: 10px;
    background-color: #f2f2f2;
    margin-top: 20px;
}

/deep/ .el-form-item {
    margin-bottom: 0px;
}

/deep/ .el-dialog__body {
    padding-top: 0px;
}

.el-dialog-div {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}
</style>
